

<template>
  <!-- pages/station-order-list/station-order-list.wxml -->
  <view class="Mall4j container">
    <view class="main">
      <!-- 订单列表 -->
      <block v-for="(item, shopIndex) in stationList" :key="item.orderNumber">
        <view class="prod-item">
          <!-- 店铺 -->
          <!-- <view class="shop-box">
          <view class="shop-icon">
            <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/shop.png"></image>
          </view>
          <view class="shop-name">{{item.shopName}}</view>
        </view> -->
          <!-- 订单编号 -->
          <view class="order-num">
            <checkbox color="#eb2444" class="check" :data-shopindex="shopIndex" :checked="item.checked" @tap="orderRadioChange(shopIndex)" />
            <text>{{ i18n.orderNumber }}：{{ item.orderNumber }}</text>
            <view class="order-state">
              <text :class="['order-sts' , {red: (item.status < 5) }]">{{ ['',i18n.toBePaid,i18n.goodsBePicked,i18n.toBeReceived,i18n.toBeEvaluated,i18n.completed,i18n.cancelled,i18n.inAGroup][item.status] }}</text>
              <view v-if="item.status==5 || item.status==6" class="clear-btn">
                <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/clear-his.png" class="clear-list-btn" :data-ordernum="item.orderNumber" @tap="delOrderList" />
              </view>
            </view>
          </view>
          <!-- 商品列表 -->
          <!-- 一个订单单个商品的显示 -->
          <block v-for="(prod, prodId) in item.orderItemDtos" :key="prodId">
            <view class="item-cont" :data-ordernum="item.orderNumber" @tap="toOrderDetailPage">
              <view class="prod-pic">
                <image v-if="prod.pic" :src="prod.pic" />
                <image v-else src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/def.png" mode="aspectFit" />
              </view>
              <view class="prod-info">
                <view class="prodname">{{ prod.prodName }}</view>
                <view class="prod-info-cont">{{ prod.skuName }}</view>
                <view class="price-nums">
                  <text class="prodprice">
                    <text v-if="item.actualTotal" class="symbol">￥</text>
                    <text v-if="item.actualTotal" class="big-num">{{ wxs.parsePrice(prod.price)[0] }}</text>
                    <text v-if="item.actualTotal" class="small-num">.{{ wxs.parsePrice(prod.price)[1] }}</text>
                    <text v-if="item.actualTotal && item.orderType==3" class="small-num" decode="true">&emsp;+&emsp;</text>
                    <text v-if="prod.useScore && item.orderType==3" class="small-num">{{ prod.useScore }} {{ i18n.integral }}</text>
                  </text>
                  <text class="prodcount">x{{ prod.prodCount }}</text>
                </view>
              </view>
            </view>
          </block>
          <view class="total-num">
            <view v-if="item.orderType" class="spell-group-icon">
              <!-- orderType 订单类型(0普通订单 1团购订单 2秒杀订单) -->
              {{ ['',i18n.aGroup,i18n.spike,i18n.integral][item.orderType] }}
            </view>
            <view class="right">
              <view class="prodcount">{{ i18n.inTotal }}{{ item.productNums }}{{ i18n.items }}</view>
              <view class="prodprice">{{ i18n.total }}：<text v-if="item.actualTotal" class="symbol">￥</text>
                <text v-if="item.actualTotal" class="big-num">{{ wxs.parsePrice(item.actualTotal)[0] }}</text>
                <text v-if="item.actualTotal" class="small-num">.{{ wxs.parsePrice(item.actualTotal)[1] }}</text>
                <text v-if="item.actualTotal && item.orderType==3" class="small-num">+</text>
                <text v-if="item.orderType==3" class="small-num">{{ item.orderItemDtos[0].useScore }} 积分</text>
              </view>
            </view>
          </view>
          <!-- end 商品列表 -->
        </view>
      </block>

      <!-- 提交按钮 -->
      <view v-if="stationList.length" class="confirm" @tap="confirmRemoval">{{ i18n.confirmPickUp }}</view>
    </view>

    <!-- 空 -->
    <view v-if="!stationList.length" class="empty">
      <view class="empty-icon">
        <image src="https://mall-1312577323.cos.ap-chengdu.myqcloud.com/mall/images/icon/empty.png" />
      </view>
      <view class="empty-text">{{ i18n.noOrderTips }}</view>
    </view>

  </view>
  <!-- end 订单列表 -->
</template>

<script module="wxs" lang="wxs" src="../../wxs/number.wxs"></script>

<script>
var http = require("../../utils/http.js");
var config = require("../../utils/config.js");
import {
  PayType,
  AppType
} from "../../utils/constant.js";
import Pay from "../../utils/pay.js";
export default {
  data () {
    return {
      stationList: [],
      stationId: 2,
      orderNumbers: [], //选中的订单
    };
  },

  components: {},
  props: {},

  computed: {
    i18n () {
      return this.$t('index')
    }
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if (options.stationId) {
      this.stationId = options.stationId
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    //头部导航标题
    uni.setNavigationBarTitle({
      title: this.i18n.pickUpOrderList
    });

    this.loadStationOrderData();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () { },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () { },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () { },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () { },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () { },
  methods: {
    /**
     * 加载自提点订单数据
     */
    loadStationOrderData: function (sts, current) {
      var params = {
        url: "/p/myStationOrder/getOrderBystationId",
        method: "GET",
        data: {
          stationId: this.stationId
        },
        callBack: (res) => {
          this.stationList = res
        },
      };
      http.request(params);
    },

    /**
     * 查看订单详情
     */
    toOrderDetailPage: function (e) {
      // uni.navigateTo({
      //   url: '/pages/order-detail/order-detail?orderNum=' + e.currentTarget.dataset.ordernum
      // });
      this.$Router.push({
        path: '/pages/order-detail/order-detail',
        query: {
          orderNum: e.currentTarget.dataset.ordernum
        }
      })
    },

    /**
     * 订单选择
     */
    orderRadioChange: function (shopIndex) {
      console.log(shopIndex)
      var stationList = this.stationList
      let checked = stationList[shopIndex].checked
      console.log(checked)
      stationList[shopIndex].checked = !checked; // 改变状态
      console.log(stationList[shopIndex].checked)
      let orderNumbers = []
      this.stationList.forEach((el) => {
        if (el.checked) {
          orderNumbers.push(el.orderNumber)
        }
      })
      this.orderNumbers = orderNumbers.join()
      console.log(this.orderNumbers)
    },

    /**
     * 一键取件
     */
    confirmRemoval: function () {
      var orderNumbers = this.orderNumbers
      console.log(orderNumbers)
      if (this.orderNumbers == "") {
        uni.showToast({
          title: this.i18n.SelectOrderPickup,
          icon: 'none',
          duration: 1500,
        })
      } else {
        uni.showModal({
          title: this.i18n.tips,
          content: this.i18n.confirmPickUpTips,
          cancelText: this.i18n.cancel,
          confirmText: this.i18n.confirm,
          success: (res) => {
            if (res.confirm) {
              var params = {
                url: "/p/myStationOrder/orderStationByOrderNumber",
                method: "PUT",
                data: orderNumbers,
                callBack: () => {
                  uni.showToast({
                    title: this.i18n.pickUpSuccessfully,
                    icon: 'none',
                    duration: 1500,
                    complete: () => {
                      setTimeout(() => {
                        this.loadStationOrderData()
                        // 	this.$Router.replace({ path: '/pages/order-list/order-list', query: { sts: 3 } })
                      }, 1500)
                    }
                  })
                }
              };
              http.request(params);
            } else if (res.cancel) { }
          }
        });
      }
    },

  }
};
</script>
<style>
@import "./station-order-list.css";
</style>
